<style>
.customer-btn-export {
  margin-bottom: 10px;
  /* margin-top: -20px; */
}
</style>
<template>
  <div>
    <btn-export :tableData="list" :tableTitle="columns" :title="title" class="customer-btn-export"></btn-export>
    <Table :columns="columns" :data="tableData" :loading="loading" border></Table>
  </div>
</template>
<script>
import BtnExport from '_c/btn-export'
export default {
  name: 'CustomerTable',
  components: {
    BtnExport
  },
  props: {
    tableData: null,
    page: '',
    pageSize: '',
    title: '',
    list: null,
    btnTitle: null,
    loading: Boolean
  },
  mounted () {
    if (this.$route.path === '/interested') {
      this.columns = this.columns.filter(item => (item.key !== 'mname'))
    }
  },
  data () {
    return {
      columns: [
        {
          title: '序号',
          type: 'index2',
          width: 60,
          align: 'center',
          // fixed: 'left',
          render: (h, params) => {
            return h(
              'span',
              params.index + (this.page - 1) * this.pageSize + 1
            )
          }
        },
        {
          title: '客户姓名',
          key: 'uname',
          minWidth: 90,
          align: 'center'
          // fixed: 'left'
        },
        {
          title: '客户电话',
          key: 'tel',
          minWidth: 115,
          align: 'center'
        },
        {
          title: '推荐销售',
          key: 'pname',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.pname ? params.row.pname : '-')
          }
        },
        {
          title: '接待销售',
          key: 'mname',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.mname ? params.row.mname : '-')
          }
        },
        {
          title: '创建日期',
          key: 'ctime',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '客户状态',
          key: 'state',
          minWidth: 85,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              {},
              params.row.state === '0'
                ? '未预约'
                : params.row.state === '1'
                  ? '已预约'
                  : params.row.state === '2'
                    ? '未到访'
                    : params.row.state === '3'
                      ? '已到店'
                      : params.row.state === '4'
                        ? '已签约'
                        : params.row.state === '5'
                          ? '已退款'
                          : '-'
              // params.row.method
            )
          }
        },
        {
          title: '预约时间',
          key: 'appointime',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              params.row.appointime ? params.row.appointime : '-'
            )
          }
        },
        {
          title: '到店时间',
          key: 'comdate',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.comdate
                ? this.$moment(params.row.comdate).format('YYYY-MM-DD HH:mm:ss')
                : '-'
            )
          }
        },
        {
          title: '商品',
          key: 'gname',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.gname ? params.row.gname : '-')
          }
        },
        {
          title: '任务渠道',
          key: 'tname',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.tname && params.row.tname.length > 5) {
              return h(
                'span',
                {
                  attrs: {
                    title: params.row.tname
                  }
                },
                params.row.tname ? params.row.tname.slice(0, 5) + '...' : '-'
              )
            } else {
              return h('span', params.row.tname ? params.row.tname : '-')
            }
            // return h('span', params.row.tname ? params.row.tname : '-')
          }
        },
        {
          title: '签约日期',
          key: 'orderdate',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.orderdate
                ? this.$moment(params.row.orderdate).format(
                  'YYYY-MM-DD HH:mm:ss'
                )
                : '-'
            )
          }
        },
        {
          title: '到店谈单时间',
          key: 'difftime',
          align: 'center',
          minWidth: 110,
          render: (h, params) => {
            return h('span', params.row.difftime ? params.row.difftime : '-')
          }
        },
        {
          title: '签约金额',
          key: 'cprice',
          align: 'center',
          minWidth: 85
        },
        {
          title: '积分',
          key: 'commission',
          align: 'center',
          minWidth: 85
        },
        {
          title: '流失时间',
          key: 'lostdate',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            return h(
              'span',
              params.row.lostdate
                ? this.$moment(params.row.lostdate).format(
                  'YYYY-MM-DD HH:mm:ss'
                )
                : '-'
            )
          }
        },
        {
          title: '操作',
          key: 'cz',
          minWidth: 220,
          align: 'center',
          // fixed: 'right',
          render: (h, params) => {
            if (this.title !== '客户管理流失客户') {
              if (params.row.state === '1') {
                return h('div', [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small',
                        ghost: 'ghost'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.handleClick(params.row.id, params.row)
                        }
                      }
                    },
                    '流失'
                  ),
                  h(
                    'Button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small',
                        ghost: 'ghost'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.handleDetail(params.row.id, params.row)
                        }
                      }
                    },
                    params.row.state === '0'
                      ? '预约'
                      : params.row.state === '1'
                        ? '确认到店'
                        : params.row.state === '2'
                          ? '重新预约'
                          : params.row.state === '3'
                            ? '确认签约'
                            : params.row.state === '4'
                              ? '退款'
                              : params.row.state === '5'
                                ? '详情'
                                : ''
                  ),
                  h(
                    'Button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small',
                        ghost: 'ghost'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.handleAppoint(params.row.id, params.row)
                        }
                      }
                    },
                    '重新预约'
                  )
                ])
              } else {
                return h('div', [
                  params.row.state !== '4' && h(
                    'Button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small',
                        ghost: 'ghost'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.handleClick(params.row.id, params.row)
                        }
                      }
                    },
                    '流失'
                  ),
                  h(
                    'Button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small',
                        ghost: 'ghost'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.handleDetail(params.row.id, params.row)
                        }
                      }
                    },
                    params.row.state === '0'
                      ? '预约'
                      : params.row.state === '1'
                        ? '确认到店'
                        : params.row.state === '2'
                          ? '重新预约'
                          : params.row.state === '3'
                            ? '确认签约'
                            : params.row.state === '4'
                              ? '退款'
                              : params.row.state === '5'
                                ? '详情'
                                : ''
                  )
                ])
              }
            } else {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                      ghost: 'ghost'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.handleDetail(params.row.id, params.row)
                      }
                    }
                  },
                  '详情'
                )
              ])
            }
          }
        }
      ]
    }
  },
  methods: {
    handleClick (id, row) {
      this.$emit('handle-click', row)
    },
    handleDetail (id, row) {
      this.$emit('handle-detail', row)
    },
    handleAppoint (id, row) {
      this.$emit('handle-appoint', row)
    }
  }
}
</script>
